import React, { useState } from 'react'
import Taro, { FC } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import ReleaseBtn from '@/components/ReleaseBtn'
import classnames from 'classnames'

import './index.scss'

const MutualShare: FC = () => {
  const [current, setCurrent] = useState<number>(0)
  const tabList = [
    { title: '物品分享', id: 1 },
    { title: '技能分享', id: 2 }
  ]

  return (
    <View className='mutualShare page-height grey-bgc'>
      <View
        onClick={() => {
          Taro.navigateTo({ url: '/pages/MessageList/index' })
        }}
      >
        消息列表
      </View>
      <ReleaseBtn />
      <View className='mutualShare-tabs white-bgc'>
        {tabList.map((item, index) => {
          return (
            <View
              key={item.id}
              className={classnames({
                'mutualShare-tabs__item': true,
                'mutualShare-tabs--active': current === index
              })}
              onClick={() => {
                setCurrent(index)
              }}
            >
              {item.title}
              <View
                className={classnames({
                  'mutualShare-tabs__item-underline': current === index
                })}
              ></View>
            </View>
          )
        })}

        <AtIcon
          value='bullet-list'
          size='30'
          color='#000'
          className='mutualShare-tabs__icon ct'
          onClick={() => {
            Taro.navigateTo({ url: '/pages/ItemSharing/ItemLIst/index' })
          }}
        ></AtIcon>
      </View>
      <View style={{ display: current === 0 ? 'block' : 'none' }}>物品分享页面</View>
      <View style={{ display: current == 1 ? 'block' : 'none' }}>技能分享页面</View>
      <ReleaseBtn />
    </View>
  )
}
export default MutualShare
